#app .markdowned-area {
  $color-markdown-code-bg: rgba(40, 46, 51, 0.05);
  a {
    color: #4183C4;
    &:hover {
      border-bottom: 2px solid #4183c480;
    }
  }

  img {
    max-width: 100%;
  }

  ul {
    list-style: circle;
    padding-left: 40px;
    > * > ul {
      list-style: square;
    }
  }

  padding: 4px 11px;
  border-radius: 2px;

  h1,
  h2,
  h3 {
    margin: 1.5rem 0;
    position: relative;

    &::before {
      position: absolute;
      bottom: -0.7rem;
      content: '';
      width: 100%;
      height: 2px;
      left: 0;
      background: $border-default-color;
    }

  }

  h3 {
    &::before {
      bottom: -0.5rem;
      height: 1px;
    }
  }

  h1 {
    font-size: 2.5rem;
    &::after {
      content: '1';
    }
  }

  h2 {
    font-size: 2rem;
    &::after {
      content: '2';
    }
  }

  h3 {
    &::after {
      content: '3';
    }
  }

  h4 {
    font-size: 1.3rem;
    &::after {
      content: '4';
    }
  }

  h5 {
    font-size: 1.1rem;
    &::after {
      content: '5';
    }
  }


  h1, h2, h3, h4, h5 {
    font-weight: bold;
    position: relative;
    &::after {
      transform: translateX(2px);
      position: absolute;
      bottom: -0.2em;
      font-weight: lighter;
      font-size: x-small;
      zoom: 0.8;
      color: rgba(155, 153, 153, 0.5);
    }
  }

  p {
    > code {
      padding: 0.2em 0.4em;
      margin: 0;
      background-color: $color-markdown-code-bg;
      border-radius: 6px;
    }
  }

  blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
  }

  pre.hljs {
    padding: 8px 2px;
    border-radius: 5px;
    position: relative;
    ol {
      list-style: decimal;
      margin: 0;
      margin-left: 40px;
      padding: 0;
      li {
        list-style: decimal-leading-zero;
        position: relative;
        padding-left: 10px;
        .line-num {
          position: absolute;
          left: -40px;
          top: 0;
          width: 40px;
          height: 100%;
          border-right: 1px solid rgba(0, 0, 0, 0.66);
          &::before {
            content: "";
            position: absolute;
            width: 4px;
            height: 2px;
            right: 9px;
            bottom: 7px;
            background-color: rgb(30, 30, 30);
          }
        }
      }
    }
    b.name {
      position: absolute;
      top: 2px;
      right: 12px;
      z-index: 10;
      color: #999;
      pointer-events: none;
    }
  }

  table {
    padding: 0; }
    table tr {
      border-top: 1px solid #cccccc;
      background-color: white;
      margin: 0;
      padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }
}